<template>
    <section class="real-app">
        <input type="text" class="add-input" autofocus="autofocus" placeholder="接下去要做什么" @keyup.enter="addtodo">
        <Item :todo="todo"></Item>
        <Tabs :filter="filter"></Tabs>
    </section>
</template>

<script>
import Item from './item.vue'
import Tabs from './tabs.vue'
export default {
    components:{
        Item,
        Tabs
    },
    data(){
        return {
            todo:{
                id:0,
                content:'this is todo',
                completed:true
            },
            filter:'all'
        }
    },
    methods:{
        addtodo(){
            
        }
    }
}
</script>

<style lang="stylus" scoped>
.rel-app
  width 600px
  margin 0 auto 
  box-shadow 0 0 5px #666
.add-input
  position relative
  width 100%
  font-size 24px
  font-family inherit 
  font-weight inherit 
  line-height 1.4em
  outline none 
  color inherit 
  padding 6px
  border 1px solid #999
  box-shadow inset 0 -1px 5px 0 rgba(0, 0, 0, .5)
  box-sizing border-box
  padding 16px 16px 16px 60px
</style>